<template>
	<view>
		<view class="w100 bg-white" style="">
			<u-tabs style="position: fixed; width: 100%; z-index: 1; " :list="tabList" :is-scroll="false"
				bg-color="#ffffff" active-color="#000000" :current="current" @change="change">
			</u-tabs>
			<view style="border-bottom: solid 45px #f3f3f3;">
			</view>
		</view>
		<view class="" style="z-index: 0; ">
			<!-- 泊车订单 -->
			<view class="" v-if="current==0">
				<empty v-if="list.length==0" text="暂无订单"></empty>
				<view class="mb-20 mt-20" v-for="(item,i) in list" :key="i">
					<djOrder :item="item"></djOrder>
				</view>
				<u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant"
					margin-top="60" margin-bottom="30" />
			</view>
			<!-- 取车订单 -->
			<view class="" v-if="current==1">
				<empty v-if="list.length==0" text="暂无订单"></empty>
				<view class="mb-20" v-for="(item,i) in list" :key="i">
					<djOrder :item="item"></djOrder>
				</view>
				<u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant"
					margin-top="30" margin-bottom="40" />
			</view>
			<!-- 代驾订单 -->
			<view class="" v-if="current==2">
				<empty v-if="list.length==0" text="暂无订单"></empty>
				<view class="mb-20" v-for="(item,i) in list" :key="i">
					<djOrder :item="item"></djOrder>
				</view>
				<u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant"
					margin-top="30" margin-bottom="40" />
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import djOrders from '@/components/daijia/order-item.vue'; //订单列表
	export default {
		data() {
			return {
				// lists: [{
				// 	name: '泊车'
				// }, {
				// 	name: '取车',
				// 	// count: 5
				// }, {
				// 	name: '代驾',
				// 	// count: 5
				// }],
				current: 0,
				list: [],
				page: 1,
				status: 'loadmore',
				drive_type: '泊车订单', //订单类型 0-泊车 1代驾 2代驾
			}
		},
		onShow() {
			uni.showLoading({}),
				this.page = 1
			this.status = 'loadmore'
			this.list = []
			this.init()
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.init()
		},
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.status = "loading";
			this.init()
		},
		components: {
			djOrders: djOrders,
		},
		computed: {
			...mapState(['userInfo', 'token', 'height', 'tabList']),
		},
		methods: {
			init() {
				this.$http('/addons/ddrive/order/index', {
					drive_type: this.drive_type,
					status: 'all',
					page: this.page,
				}, "POST").then(data => {
					if (data.data.length < 10) {
						this.status = "nomore"
					} else {
						this.page = this.page + 1
						this.status = "loadmore"
					}
					this.list = this.list.concat(data.data)
					console.log(data);
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})
			},
			change(index) {
				this.list = [],
					this.page = 1,
					this.current = index;
				if (this.current == 0) {
					console.log("泊车订单");
					this.drive_type = '泊车订单';
					this.init();
				} else if (this.current == 1) {
					console.log("代驾订单");
					this.drive_type = '代驾订单';
					this.init();
				} else {
					console.log("取车订单");
					this.drive_type = '取车订单';
					this.init();
				}
			}
		}
	}
</script>

<style>

</style>
